<script setup lang='ts'>
import * as yup from 'yup'
import { useForm } from 'vee-validate'
import { Gender } from '@/enum/Gender'
import WorkExperience from '@/components/WorkExperience.vue'

// 定义字段校验规则
const validationSchema = yup.object({
  userName: yup.string().required('请输入姓名'),
  sex: yup.number().required('请选择性别'),
  email: yup.string().required('请输入邮箱').email('请输入正确的邮箱'),
  age: yup.number().min(6).required('请输入年龄'),
  height: yup.number().nullable().min(1).when('sex', {
    is: Gender.Female, // 当性别为女性时，身高为必填项
    then: schema => schema.required('女性身高为必填项'),
    otherwise: schema => schema.optional(),
  }),
  hobby: yup.string().max(100, '爱好最长100个字符').required('请输入爱好'),
  skillLevel: yup.number().required('请选择技能等级'),
  technologyStack: yup.array().min(1, '至少选择一种技术栈').required('请选择技术栈'),
  hiredate: yup.date().required('请选择入职时间'),
})
// 使用vee-validate解构出的表单属性和方法
const { defineField, setFieldValue, errors, values, handleSubmit, isSubmitting } = useForm({ validationSchema })

// 定义字段
const [sex, sexAttrs] = defineField('sex')
const [age, ageAttrs] = defineField('age')
const [email, emailAttrs] = defineField('email')
const [height, heightAttrs] = defineField('height')
const [userName, userNameAttrs] = defineField('userName')
const [hobby, hobbyAttrs] = defineField('hobby')
const [skillLevel, skillLevelAttrs] = defineField('skillLevel')
const [technologyStack, technologyStackAttrs] = defineField('technologyStack')
const [hiredate, hiredateAttrs] = defineField('hiredate')
const [workExperience, workExperienceAttrs] = defineField('workExperience')

// 表单合法时提交表单
const onSuccess = (values: object) => {
  console.log('values:', values)
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(null)
    }, 2000)
  })
}
// 表单不合法时回调
const onInvalidSubmit = ({ errors }) => {
  console.log('表单不合法:', errors)
}

// submit事件
const onSubmit = handleSubmit(onSuccess, onInvalidSubmit)
// 初始化表单数据
onMounted(() => {
  const params = {
    position: '前端开发工程师',
  }

  setFieldValue('workExperience', params, false)
})

// 监听性别变化
watch(sex, (newSex: number) => {
  // 当选择男时，清空身高
  if (newSex === Gender.Male) {
    setFieldValue('height', null, false)
  }
})
</script>

<template>
  <a-form layout="inline" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label-align="right" @submit="onSubmit">
    <a-row :gutter="[0, 20]">
      <a-col :span="6">
        <a-form-item label="姓名">
          <a-input v-model:value="userName" v-bind="userNameAttrs" placeholder="请输入姓名" />
          <a-typography-text v-if="errors.userName" type="danger">
            {{ errors.userName }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="性别">
          <a-radio-group v-model:value="sex" v-bind="sexAttrs">
            <a-radio :value="1">
              男
            </a-radio>
            <a-radio :value="2">
              女
            </a-radio>
          </a-radio-group>
          <a-typography-text v-if="errors.sex" type="danger">
            {{ errors.sex }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="身高">
          <a-input-number v-model:value="height" v-bind="heightAttrs" :min="1" :step="1" :controls="false" placeholder="请输入身高" />
          <a-typography-text v-if="errors.height" type="danger">
            {{ errors.height }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="邮箱">
          <a-input v-model:value="email" v-bind="emailAttrs" placeholder="请输入邮箱" />
          <a-typography-text v-if="errors.email" type="danger">
            {{ errors.email }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="年龄">
          <a-input-number v-model:value="age" v-bind="ageAttrs" :min="1" :step="1" :controls="false" placeholder="请输入年龄" />
          <a-typography-text v-if="errors.age" type="danger">
            {{ errors.age }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="技术栈">
          <a-checkbox-group v-model:value="technologyStack" v-bind="technologyStackAttrs">
            <a-row :gutter="[10, 10]">
              <a-col>
                <a-checkbox value="JavaScript">
                  JavaScript
                </a-checkbox>
              </a-col>
              <a-col>
                <a-checkbox value="TypeScript">
                  TypeScript
                </a-checkbox>
              </a-col>
              <a-col>
                <a-checkbox value="Vue2/3">
                  Vue2/3
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
          <a-typography-text v-if="errors.technologyStack" type="danger">
            {{ errors.technologyStack }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="技能等级">
          <a-select v-model:value="skillLevel" v-bind="skillLevelAttrs" placeholder="请选择技能等级">
            <a-select-option :value="1">
              一级
            </a-select-option>
            <a-select-option :value="2">
              二级
            </a-select-option>
            <a-select-option :value="3">
              三级
            </a-select-option>
            <a-select-option :value="4">
              四级
            </a-select-option>
          </a-select>
          <a-typography-text v-if="errors.skillLevel" type="danger">
            {{ errors.skillLevel }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="入职时间">
          <a-date-picker v-model:value="hiredate" v-bind="hiredateAttrs" value-format="YYYY-MM-DD" placeholder="请选择入职时间" />
          <a-typography-text v-if="errors.hiredate" type="danger">
            {{ errors.hiredate }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="爱好">
          <a-textarea v-model:value="hobby" v-bind="hobbyAttrs" :rows="4" placeholder="请输入爱好" />
          <a-typography-text v-if="errors.hobby" type="danger">
            {{ errors.hobby }}
          </a-typography-text>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <WorkExperience v-model="workExperience" v-bind="workExperienceAttrs" />
      </a-col>
      <a-col :span="24">
        values: {{ values }}
      </a-col>
      <a-col :span="24">
        errors: {{ errors }}
      </a-col>
      <a-col :span="24">
        <a-form-item>
          <a-button type="primary" html-type="submit" :disabled="isSubmitting">
            Submit
          </a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<style scoped>
:deep() {
  .ant-input-number,
  .ant-picker {
    width: 100%;
  }
}
</style>

<route lang='json5'>
{
name: 'home',
meta: {
title: '首页',
i18n: 'menus.home'
},
}
</route>
